<template>
  <div>
    <van-nav-bar
      title="地图找房"
      left-arrow
      @click-left="$router.push('/article')"
    />
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: "map-page",
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(120.362893, 30.312237);
    map.centerAndZoom(point, 15);
    var content = "宝鸡58套";
    var label = new BMapGL.Label(content, {
      // 创建文本标注
      position: point, // 设置标注的地理位置
      offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
    });
    map.addOverlay(label); // 将标注添加到地图中
    label.setStyle({
      // 设置label的样式
      color: "#fff",
      fontSize: "20px",
      border: "2px solid #fff",
      width: "100px",
      height: "80px",
      borderRadius: "50%",
      backgroundColor: "#087",
      textAlign: "center",
      paddingTop: "30px",
    });
    label.addEventListener("click", function () {
      alert("您点击了标注");
    });
  },
};
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
</style>
